<template>
    <view class="page">
        <TopBar :showName='showName' :BackgroundColor.sync="BackgroundColor"></TopBar>
        <view class="page-top" :style="{'padding-top':navigationbarHeight+'px','height':'calc(550rpx - '+navigationbarHeight+'px)'}">
            <view class="page-top-img">
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-top.png" />
            </view>
            <view class="page-top-time">
                <text class="time-number">{{time.days}}</text>
                <text class="time-number">{{time.day}}</text>
                <view class="time-name">天</view>
                <text class="time-number">{{time.hours}}</text>
                <text class="time-number">{{time.hour}}</text>
                <view class="time-name">时</view>
                <text class="time-number">{{time.mins}}</text>
                <text class="time-number">{{time.min}}</text>
                <view class="time-name">分</view>
            </view>
        </view>
        <view class="page-bottom">
            <view class="page-bottom-item">
                <view class="bottom-item-title">
                    <view class="item-icon">
                        <img v-if="circle_Info.article_num<3" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon.png" />
                        <img v-if="circle_Info.article_num>2" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon-grey.png" />
                    </view>
                    <view :class="{'item-title':true,'font-grey':circle_Info.article_num>2}">圈主发帖</view>
                    <view class="item-status font-blue" v-if="circle_Info.article_num<3" @click="skipPosting">去发帖</view>
                    <view class="item-status font-grey" v-if="circle_Info.article_num>2">已完成</view>
                </view>
                <view class="bottom-item-content">
                    {{circle_Info.article_num}}/3 在所创圈子内发布一篇帖子
                </view>
            </view>
            <view class="page-bottom-item">
                <view class="bottom-item-title">
                    <view class="item-icon">
                        <img v-if="circle_Info.user_num<20" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon.png" />
                        <img v-if="circle_Info.user_num>19" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon-grey.png" />
                    </view>
                    <view :class="{'item-title':true,'font-grey':circle_Info.user_num>19}">圈子关注人数</view>
                    <view class="item-status font-blue" v-if="circle_Info.user_num<20" @click="sharingCircles">去邀请</view>
                    <view class="item-status font-grey" v-if="circle_Info.user_num>19">已完成</view>
                </view>
                <view class="bottom-item-content">
                    {{circle_Info.user_num}}/20 若关注人数不够可邀请好友
                </view>
            </view>
            <view class="page-bottom-item">
                <view class="bottom-item-title">
                    <view class="item-icon">
                        <img v-if="progress_rate<80" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon.png" />
                        <img v-if="progress_rate>79" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-icon-grey.png" />
                    </view>
                    <view :class="{'item-title':true,'font-grey':progress_rate>79}">圈子资料补充</view>
                    <view v-if="progress_rate<80" class="item-status font-blue" @click="toCircleMain">去完善</view>
                    <view v-if="progress_rate>79" class="item-status font-grey">已完成</view>
                </view>
                <view class="bottom-item-content">
                    完善圈子资料80%（当前{{progress_rate}}%）
                </view>
            </view>
            <view class="page-bottom-remind">
                完成7天试运营后，你将获得以下权限：
            </view>
            <view class="page-bottom-power">
                <view class="bottom-power-item" @click="toCircleMain">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-ziliao.png"/>
                    <text>修改圈资料</text>
                </view>
                <view class="bottom-power-item" @click="toCircleAdmin">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-quanzhu.png"/>
                    <text>管理小圈主</text>
                </view>
<!--                <view class="bottom-power-item">-->
<!--                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-shouyi.png"/>-->
<!--                    <text>流量收益</text>-->
<!--                </view>-->
            </view>
        </view>
    </view>
</template>

<script>
    import TopBar from "@/pages/components/topBar/topBar";
    export default {
        name: "circleOperations",
        components: {TopBar},
        data(){
            return{
                navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
                showName:'back',
                circle_id: '',
                time:{
                    days:0,
                    day:0,
                    hours:0,
                    hour:0,
                    mins:0,
                    min:0
                },
                timer:'',
                circle_Info: {},
                progress_rate: ''
            }
        },
        onLoad(query){
            this.circle_id = query.circle_id;
        },
        onShow(){
            this.getMyCircleStatus();
            this.timer = setInterval(this.getMyCircleStatus, 60000);
        },
        onHide(){
            clearInterval(this.timer);
        },
        methods:{
            //获取圈子进度
            async getMyCircleStatus(){
                let params = {
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getMyCircleStatus(params);
                if (res.data.level == 'success'){
                    this.circle_Info = res.data.data.circle_info;
                    let day = res.data.data.remain_day.split('');
                    let hour =  res.data.data.remain_hour.split('');
                    let min = res.data.data.remain_minute.split('');
                    this.progress_rate = res.data.data.progress_rate;
                    this.time = {
                        days : day[0],
                        day : day[1],
                        hours : hour[0],
                        hour : hour[1],
                        mins : min[0],
                        min : min[1]
                    }
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //跳转到相应的发帖编辑页
            skipPosting(){
                uni.navigateTo({
                    url : '/pages/posting/graphicposts/graphicposts?circleName='+this.circle_Info.name+'&circle_id='+this.circle_id
                })
            },
            toCircleMain(){
                //跳转圈子简介
                uni.navigateTo({
                    url:`/pages/circlebar/circlebarMain/circlebarMain?circle_id=${this.circle_id}`
                })
            },
            //分享圈子
            sharingCircles(){
                uni.navigateTo({
                    url:"/pages/sharePost/shareCircle/shareCircle?circle_id="+this.circle_id
                })
            },
            //管理小圈主
            toCircleAdmin(){
                uni.navigateTo({
                    url:'/pages/circlebar/circlebarAdmin/circlebarAdmin?circle_id='+this.circle_id
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page{
        background: #F1F4F7;
        min-height: 100vh;
    }
    .page-top{
        /*height: 580rpx;*/
        width: 100vw;
        background-image: url("http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/operations-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .page-top-img{
            width: 548rpx;
            height: 180rpx;
        }
        .page-top-time{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 12rpx 28rpx;
            .time-number{
                width: 48rpx;
                height: 72rpx;
                line-height: 72rpx;
                text-align: center;
                font-size: 48rpx;
                color: #FFFFFF;
                background: #292929;
                border-radius: 8rpx;
                margin: 0 4rpx;
            }
            .time-name{
                font-size: 28rox;
                color: #FFE226;
                height: 72rpx;
                line-height: 72rpx;
                margin: 0 8rpx;
            }
        }
    }
    .page-bottom{
        margin-top: -90rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 30rpx;
        .page-bottom-item{
            width: calc(100% - 60rpx);
            height: 108rpx;
            background: #FFFFFF;
            border-radius: 16rpx;
            padding: 32rpx 30rpx 40rpx 30rpx;
            margin-bottom: 20rpx;
            .bottom-item-title{
                display: flex;
                flex-direction:row;
                justify-content: flex-start;
                align-items: flex-start;
                margin-bottom: 30rpx;
                .item-icon{
                    width: 52rpx;
                    height: 52rpx;
                    margin-right: 30rpx;
                }
                .item-title{
                    font-size: 32rpx;
                    font-weight: bold;
                    height: 52rpx;
                    line-height: 52rpx;
                }
                .item-status{
                    margin-left: auto;
                    font-size: 26rpx;
                    height: 52rpx;
                    line-height: 52rpx;
                }
            }
            .bottom-item-content{
                color: #8B8D93;
                font-size: 26rpx;
                padding-left: 82rpx;
            }
        }
        .page-bottom-remind{
            padding: 40rpx;
            color: #6F7073;
            font-size: 28rpx;
            font-weight:400;
            line-height:14px;
            margin-bottom: 26rpx;
        }
        .page-bottom-power{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-bottom: 50rpx;
            .bottom-power-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 54rpx;
                img{
                    height: 88rpx;
                    width: 88rpx;
                    margin-bottom: 20rpx;
                    border-radius: 0;
                }
                text{
                    color:#6F7073;
                    font-size: 24rpx;
                    font-weight:400;
                    line-height: 24rpx;
                }
            }
        }
    }
    .font-blue{
        color: #0981F5;
    }
    .font-grey{
        color: #BBBCBF;
    }
</style>